<template>
	<view class="page">
		<view class="header">
			<image class="img" :src="image_header+'centerBg.png'" alt=""></image>
			<view class="user-info pd-10">
				<view class="flex items-center">
					<navigator hover-class="none" class="avatar" url="../personal/personal">
						<!-- <open-data type="userAvatarUrl"></open-data> -->
						<image v-if="userInfo.avatar" class="img" :src="userInfo.avatar" mode=""></image>
					</navigator>
					<view class="flex-1 flex justify-between">
						<view class="align-middle">
							<view class="margin-bottom_10">
								<view class="nickname text-overflow align-middle" v-if="userInfo.nickname">
									{{ userInfo.nickname }}
									<!-- <open-data type="userNickName"></open-data> -->
								</view>
								<text class="grade border-25 align-middle"
									v-if="userInfo.grade_name">{{ userInfo.grade_name }}</text>
							</view>
							<!-- <view v-if="userInfo.add_time">{{ userInfo.add_time }}</view> -->
							<view style="font-size: 26rpx;">
								<text style="color: #ddd;" v-if="pid == 0" @click="open">请填写邀请码</text>
								<text style="color: #fff;" v-else-if="p_name">上级分销员:{{ p_name }}</text>
								<!-- <text style="color: #fff;" v-else>上级分销员:--</text> -->
							</view>
						</view>
						<navigator hover-class="none" class="align-middle"
							:url="'../upgrade/upgrade?grade_id=' + userInfo.grade_id">
							<Icons type="iconwenhao" size="20"></Icons>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<view class="container-main">
			<view class="header-main">
				<view class="withdraw flex items-center">
					<view class="flex-1">
						<view>
							<text style="display:inline-block;font-size:26rpx;margin-bottom: 10rpx;">可提现金额</text>
							<text
								class="withdraw-money">￥{{ userInfo.settable_amount ? userInfo.settable_amount : 0 }}</text>
							<text style='font-size:26rpx;'>余额 ￥{{ userInfo.balance ? userInfo.balance : 0 }}</text>
						</view>
						<view class="">
							<Icons type="iconlingdang" size="14" color="#F5D49C"></Icons>
							<text class="timeLimit">用户订单已结算后将成为可提现佣金</text>
						</view>
					</view>
					<navigator hover-class="none" :url="'../withdraw/withdraw?money=' + userInfo.settable_amount"
						class="btn">提现</navigator>
				</view>
				<view class="estimate">
					<ul class="flex text-center">
						<li v-for="(item, index) in estimate" :key="index" class="w-1_4">
							<view class="money main-color">{{ item.money }}</view>
							<view class="test">{{ item.date }}预估</view>
						</li>
					</ul>
				</view>
			</view>
			<view class="features margin-bottom_10">
				<view class="tip-title pd_b-15">常用功能</view>
				<view class="features-main">
					<ul class="flex flex-wrap">
						<navigator hover-class="none" v-for="(item, index) in features" :key="index" :url="item.path"
							class="features-li text-center w-1_4">
							<img class="features-img" :src="item.img" alt="" />
							<view class="features-name">{{ item.name }}</view>
						</navigator>
					</ul>
				</view>
			</view>
			<view class="features margin-bottom_10">
				<view class="flex items-center justify-between" :class="{'pd_b-15':len}">
					<view class="tip-title">分销商品</view>
					<view class="flex items-center">
						<navigator hover-class="none" url="../commodity/commodity" class="see">查看更多</navigator>
						<Icons type="iconarrow" size="14" color='#999'></Icons>
					</view>
				</view>
				<view class="features-main" v-if="list.length > 0">
					<ul class="flex flex-wrap">
						<li v-for="(item, index) in list" :key="index" class="text-center img-box-list margin"
							@click='goShop(item)'>
							<view class="img-box">
								<image v-if="item.goods_img" class="img" :src="item.goods_img" mode=""></image>
							</view>
						</li>
					</ul>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="input" mode="input" title="绑定上级分销员" message="成功消息" placeholder="请填写上级分销员的邀请码"
				color="#FF5C6D" :value="invite_code" :duration="2000" :before-close="true" @close="close"
				@confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	let App = getApp().globalData;

	import Icons from '@/components/Icon/Icon.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	import {
		distributeGoods
	} from '@/mixins/index.js';
	export default {
		mixins: [distributeGoods],
		components: {
			Icons,
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				userInfo: {},
				pid: '', //上级id
				p_name: "", //
				auto_update: 1, // 是否自动升级{0:自动升级,1:不允许自动升级}
				//
				estimate: [{
						money: '0',
						date: '今日'
					},
					{
						money: '0',
						date: '昨日'
					},
					{
						money: '0',
						date: '本月'
					},
					{
						money: '0',
						date: '上月'
					}
				],
				// tab列表
				features: [{
						type: 1,
						name: '我的分销员',
						path: '../my/my?type=' + 1,
						img: '/static/fn1.png'
					},
					{
						type: 2,
						name: '我的客户',
						path: '../my/my?type=' + 2,
						img: '/static/fn2.png'
					},
					{
						type: 3,
						name: '分销订单',
						path: '../order/order',
						img: '/static/fn3.png'
					},
					{
						type: 4,
						name: '提现记录',
						path: '../withdrawRecord/withdrawRecord',
						img: '/static/fn4.png'
					},
					{
						type: 5,
						name: '邀请好友',
						path: '../inviteFriends/inviteFriends',
						img: '/static/fn5.png'
					},
					{
						type: 6,
						name: '收款账号',
						path: '../withdrawSet/withdrawSet',
						img: '/static/fn6.png'
					}
				],

				// 查看更多
				list: [],
				invite_code: '',
				page: 1,
				limit: 3,
				image_header: "",

			};
		},

		computed: {
			len() {
				if (this.list.length > 0) {
					return true
				}
				return false
			},
			distributor_id() {
				return this.$store.distributor_id
			}
		},

		async mounted() {
			await this.$onLaunched;
			this.image_header = this.$store.image_header

			this.getDistributionGoods();
		},
		async onShow() {
			await this.$onLaunched;

			if (!getApp().globalData.loginState()) {
				getApp().globalData.toMyLogin('/pages/distribution/recruit/recruit')
			} else {
				this.getDistributorBasicInfo();
			}
		},

		methods: {
			// 获取分销员信息
			getDistributorBasicInfo() {
				console.log('获取分销员信息')
				let _self = this;
				this.$request('Distribution/MiniDistributor/getDistributorBasicInfo').then(res => {
					if (res.status === 1) {
						let {
							phone_number,
							nickname,
							avatar,
							grade_name,
							proportion,
							grade_id,
							settable_amount,
							add_time
						} = res.data;
						_self.$set(_self.userInfo, 'phone_number', phone_number);
						_self.$set(_self.userInfo, 'nickname', nickname);
						_self.$set(_self.userInfo, 'avatar', avatar);
						_self.$set(_self.userInfo, 'grade_name', grade_name);
						_self.$set(_self.userInfo, 'proportion', proportion);
						_self.$set(_self.userInfo, 'grade_id', grade_id);
						_self.$set(_self.userInfo, 'settable_amount', settable_amount);
						_self.$set(_self.userInfo, 'add_time', add_time);
						_self.$set(_self.userInfo, 'balance', res.data.balance);
						_self.auto_update = res.data.auto_update;
						let id = res.data.distributor_id; // 分销员id
						this.$mutations.saveDistributor_id(id) // 保存分销员id
						_self.pid = res.data.pid; // 上级ID
						_self.p_name = res.data.p_name; //上级分销员的名字

						try {
							uni.setStorageSync('distribution', JSON.stringify(_self.userInfo));
						} catch (e) {}

						if (res.data && res.data.commission) {
							let {
								today,
								yesterday,
								month,
								last_month
							} = res.data.commission;
							_self.estimate[0].money = today;
							_self.estimate[1].money = yesterday;
							_self.estimate[2].money = month;
							_self.estimate[3].money = last_month;
						}

					} else {
						if (res.data && res.data.status == 1) {
							App.showToast({
								title: '您还不是分销员，将前往申请成为分销员！',
								icon: 'none',
								mask: true,
								duration: 1000,
								success: () => {
									uni.redirectTo({
										url: '/pages/distribution/recruit/recruit'
									})
								}
							});
						} else {
							App.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				});
			},

			goShop(item) {
				let id = item.id;
				let distributor_id = this.distributor_id;
				uni.navigateTo({
					url: '/pages/product/details/details?id=' + id + '&distributor_id=' + distributor_id
				})
			},

			close(done) {
				done();
				this.invite_code = '';
			},
			open() {
				this.$refs.popup.open();
			},

			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(done, value) {
				console.log(value);
				if (!value) return;
				if (value.length < 6) {
					App.showToast({
						title: '请填写正确的邀请码',
						icon: 'none'
					});
					return false
				}
				let obj = {
					invite_code: value
				};
				//  绑定上级分销员
				this.$request('Distribution/MiniApply/bindSuperiorByInviteCode', obj).then(res => {
					if (res.status === 1) {
						App.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.invite_code = '';
						done();
						this.getDistributorBasicInfo();
					} else {
						App.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
				// done();
			}
		}
	};
</script>

<style lang="less">
	@import '@/common/index.less';

	page {
		background-color: #f6f6f6;
	}

	.page {
		// .wh;
		// position: relative;
	}

	.header {
		position: relative;
		background: @mainColor;
		color: @white;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 100%;
		height: 450rpx;
	}

	.user-info {
		position: absolute;
		top: 0;
		left: 0;
		.wh;
		box-sizing: border-box;
		padding: 45rpx 25rpx;

		.avatar {
			width: 130rpx;
			height: 130rpx;
			margin-right: 10rpx;
			border-radius: 50px;
			overflow: hidden;
		}

		.nickname {
			display: inline-block;
			max-width: 250rpx;
		}

		.grade {
			display: inline-block;
			padding: 5rpx 25rpx;
			background-color: #bb965f;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	}

	.container-main {
		position: absolute;
		top: 230rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 25rpx;

	}

	.withdraw {
		border-radius: 10px 10px 0 0;
		background: #31302e;
		padding: 20rpx 30rpx;
		color: @white;
		font-size: 28rpx;
		padding-bottom: 50rpx;

		.timeLimit {
			font-size: 24rpx;
			color: #bc965d;
		}

		.withdraw-money {
			font-size: 34rpx;
			margin-left: 10rpx;
			margin-right: 50rpx;
		}

		.btn {
			background-color: #bc965d;
			border-radius: @semicircle;
			padding: 10rpx 30rpx;
			font-size: 26rpx;
		}
	}

	.estimate {
		background: @white;
		border-radius: 10px;
		padding: 25rpx;
		transform: translateY(-25rpx);

		.money {
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}

		.test {
			color: #343434;
			font-size: 26rpx;
		}
	}

	.features {
		background: @white;
		border-radius: @border-radius-ms;
		box-sizing: border-box;
		padding: 25rpx;
		border-radius: 8px;

		.features-main {
			.features-li {
				margin-top: 25rpx;
			}

			.features-name {
				margin-bottom: 15rpx;
				font-size: 26rpx;
				color: @color-moderategray;
			}

			.features-img {
				display: inline-block;
				width: 50rpx;
				height: 50rpx;
			}
		}

		.tip-title {
			font-weight: 600;
			color: @color-darkgray;
		}
	}

	.see {
		font-size: 26rpx;
		color: @color-lightgray;
	}

	.img-box-list {
		width: 30.5%;
	}

	.img-box {
		width: 100%;
		height: 190rpx;
		border-radius: 8rpx;

		.img {
			border-radius: 8rpx;
		}
	}

	.margin {
		margin: 8rpx;
	}
</style>
